import * as cc from 'cc';
import ColorUtils from "../../libs/color/ColorUtils";
import Rect from '../../libs/geom/Rect';

export default class LayoutManager {

    readonly rect_root: Rect;

    readonly rect_top_show: Rect
    readonly rect_magic_show: Rect
    readonly rect_buffer_show: Rect
    readonly rect_handle_show: Rect
    readonly rect_table_show: Rect
    readonly rect_mine_show: Rect

    // Top
    readonly rect_top_count: Rect
    readonly rect_top_score: Rect
    readonly rect_top_curr_value: Rect
    readonly rect_top_curr_multiple: Rect

    // Table
    readonly rect_table_line: Rect

    // Mine
    readonly rect_mine_line1: Rect
    readonly rect_mine_line2: Rect
    readonly rect_mine_button: Rect

    // Mine Button
    readonly rect_mine_button_sort_number: Rect
    readonly rect_mine_button_sort_type: Rect
    readonly rect_mine_button_play: Rect
    readonly rect_mine_button_replace: Rect

    readonly drawer: cc.Graphics;

    constructor(root: cc.Node) {
        const uiTransform = root.getComponent(cc.UITransform);
        if (!uiTransform) {
            throw ' root need has UITransform';
        }

        const drawer = root.getComponent(cc.Graphics);
        if (!drawer) {
            throw ' root need has Graphics';
        }

        this.drawer = drawer;
        this.rect_root = Rect.createByCenter(0, 0, uiTransform.width, uiTransform.height);

        this.showRect(this.rect_root, 4, '#ffffff');


        // 总体构造区
        this.rect_top_show = Rect.createByLeftTopWithPoint(this.rect_root.getLeftTopPoint(), this.rect_root.width, this.rect_root.getHeightRatio(0.3));
        this.rect_magic_show = Rect.createByLeftTopWithPoint(this.rect_top_show.getLeftBottomPoint(), this.rect_root.width, this.rect_root.getHeightRatio(0.15));
        this.rect_buffer_show = Rect.createByLeftTopWithPoint(this.rect_magic_show.getLeftTopPoint(), this.rect_magic_show.getWidthRatio(0.6), this.rect_magic_show.height);
        this.rect_handle_show = Rect.createByLeftTopWithPoint(this.rect_buffer_show.getRightTopPoint(), this.rect_magic_show.getWidthRatio(0.4), this.rect_magic_show.height);
        this.rect_table_show = Rect.createByLeftTopWithPoint(this.rect_buffer_show.getLeftBottomPoint(), this.rect_root.getWidthRatio(1), this.rect_root.getHeightRatio(0.25));
        this.rect_mine_show = Rect.createByLeftTopWithPoint(this.rect_table_show.getLeftBottomPoint(), this.rect_root.getWidthRatio(1), this.rect_root.getHeightRatio(0.3));
        this.showRect(this.rect_top_show)
            .showRect(this.rect_magic_show)
            .showRect(this.rect_buffer_show)
            .showRect(this.rect_handle_show)
            .showRect(this.rect_table_show)
            .showRect(this.rect_mine_show);

        // Top显示区 
        this.rect_top_count = Rect.createByTopCenterWithPoint(this.rect_top_show.getCenterTopPoint(), this.rect_top_show.width, this.rect_top_show.getHeightRatio(0.3))
        this.rect_top_score = Rect.createByTopCenterWithPoint(this.rect_top_count.getCenterBottomPoint(), this.rect_top_show.width, this.rect_top_count.height)
        this.rect_top_curr_value = Rect.createByRightTopWithPoint(this.rect_top_score.getCenterBottomPoint(), this.rect_top_show.getWidthRatio(0.5), this.rect_top_count.height)
        this.rect_top_curr_multiple = Rect.createByLeftTopWithPoint(this.rect_top_score.getCenterBottomPoint(), this.rect_top_show.getWidthRatio(0.5), this.rect_top_count.height)
        this.showRect(this.rect_top_count)
            .showRect(this.rect_top_score)
            .showRect(this.rect_top_curr_value)
            .showRect(this.rect_top_curr_multiple);

        // Buffer显示区


        // Handle显示区


        // Table显示区
        this.rect_table_line = Rect.createByCenterWithPoint(this.rect_table_show.getCenterPoint(), this.rect_table_show.getWidthRatio(0.8), this.rect_mine_show.getHeightRatio(0.35))
        this.showRect(this.rect_table_line);

        // Mine显示区
        this.rect_mine_line1 = Rect.createByTopCenterWithPoint(this.rect_mine_show.getCenterTopPoint(), this.rect_mine_show.width, this.rect_mine_show.getHeightRatio(0.35))
        this.rect_mine_line2 = Rect.createByTopCenterWithPoint(this.rect_mine_line1.getCenterBottomPoint(), this.rect_mine_show.width, this.rect_mine_show.getHeightRatio(0.35))
        this.rect_mine_button = Rect.createByTopCenterWithPoint(this.rect_mine_line2.getCenterBottomPoint(), this.rect_mine_show.width, this.rect_mine_show.getHeightRatio(0.3))
        this.showRect(this.rect_mine_line1)
            .showRect(this.rect_mine_line2)
            .showRect(this.rect_mine_button);

    }


    showRect(rect: Rect, width: number = 2, color = ColorUtils.randomColor()) {
        this.drawer.strokeColor = new cc.math.Color().fromHEX(color);
        this.drawer.lineWidth = width;
        this.drawer.rect(rect.x, rect.y, rect.width, rect.height);
        this.drawer.stroke();
        return this;
    }
}